<template>
  <div class="layout">
    <!-- 个人信息  -->
    <div class="top-info">
      <div class="left-container">
        <div class="avtor">
          <img
            v-if="userInfo.avatar && libPath"
            :src="libPath + userInfo.avatar"
            alt=""
          />
          <!-- <img
            v-if="userInfo.avatar"
            :src="userInfo.avatar"
            alt=""
          /> -->
          <div v-else class="no-avatar">
            <p>{{ userInfo.name[0] }}</p>
          </div>
        </div>
        <div class="right-user">
          <div class="info-row">
            <div class="username">{{ userInfo.name }}</div>
            <div class="certification">
              <el-tag type="success">已实名</el-tag>
              <!-- <el-tag type="info">未实名</el-tag> -->
            </div>
          </div>
         
          <el-button @click="showUserDialog = true" class="edit-info">修改个人资料</el-button>
        </div>
      </div>
      <div class="right-data">
        <div class="data-item">
          <div class="item-tit">学习时长</div>
          <div class="item-num">41时42分</div>
        </div>
        <div class="data-item">
          <div class="item-tit">获得证书</div>
          <div class="item-num">4</div>
        </div>
      </div>
    </div>
    <!-- 用户课程信息  -->
    <div class="module-container">
      <div class="column-tit001">
        <p>课程</p>
      </div>
      <div class="course-list">
        <div class="course-item" v-for="item in courseData" :key="item.id" @click="showDetail(item)">
          <div class="img-box">
            <img :src="item.coverImg" alt="">
          </div>
          <div class="bottom-info">
            <div class="title">{{item.name}}</div>
            <div class="description">{{item.description}}</div>
          </div>
        </div>
      </div>
    </div>
   
    <!-- 考试信息  -->
    <div class="module-container">
      <div class="column-tit001">
        <p>考试</p>
      </div>
      <div class="exam-list">
        <el-card class="exam-item" v-for="item in examData" :key="item.id">
          <template #header>
            <div class="card-header">
              <div class="title">{{item.name}}</div>
              <el-tag type="info" v-if="getExamStatus(item) === 'not-started'" disabled>未开始</el-tag>
              <el-tag type="info" v-if="getExamStatus(item) === 'ended'" disabled>已结束</el-tag>
              <el-tag type="success" v-if="getExamStatus(item) === 'can-enter'" >进行中</el-tag>
            </div>
          </template>
          <div class="time"><span>开始时间：</span>{{ formatDate(item.startTime,"yyyy.MM.dd hh:mm") }}</div>
          <div class="time"><span>结束时间：</span>{{ formatDate(item.endTime,"yyyy.MM.dd hh:mm") }}</div>
          <div class="time"><span>考试总分：</span>{{ item.totalScore }}</div>
          <div class="card-footer">
            <div class="left-tag">
              <el-tag type="success" v-if="item.userParticipated == 'true'" >已通过</el-tag>
              <el-tag type="error" v-else>未通过</el-tag>
            </div>
            <el-button 
              type="primary" 
              @click.stop="viewExam(item.id)"
              v-if="item.userParticipated === 'true'"
            >
              查看考试
            </el-button>
            <el-button 
              type="primary" 
              v-else-if="getExamStatus(item) === 'ended'"
              disabled
            >
              未考试
            </el-button>

            <el-button 
              type="primary" 
              @click.stop="examDetail(item.id)"
              v-else-if="getExamStatus(item) === 'can-enter'"
            >
              进入考试
            </el-button>
          </div>
        </el-card>
      
      </div>
    </div>
  </div>
  <!-- 个人信息修改  -->
  <UserInfo v-model="showUserDialog" />
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useStore } from "vuex"; 
import { selectPageCourse } from '@/api/course'
import { userPagingExam } from '@/api/examination'
import { formatDate } from '@/utils/tools'
import UserInfo from '../components/UserInfo.vue'

const store = useStore();
const userInfo = computed(() => store.state.base.userInfo);

//获取课程信息
const courseQueryData = ref({})
const courseData = ref([]);
const defaultCourseForm = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 100,
  name: "",
  type: "PUBLIC",  //课程类型公开
  status: "PUBLISHED",  //课程状态 已发布
  needCheck: "",
  approvalStatus: "",
  createdBy: "",
  updatedBy: ""
})
Object.assign(courseQueryData.value, defaultCourseForm);

//获取考试信息
const examQueryData = ref({})
const examData = ref([]);
const defaultExamForm = reactive({
  currentPage: 1,
  pageSize: 10,
  name: "",
  status: "NORMAL",
  businessKey: "",
  timeLimit: "",
  creator: "",
  accessMode: ""
})
Object.assign(examQueryData.value, defaultExamForm);

const getCourseList = async () => {
  const res = await selectPageCourse(courseQueryData.value)
  courseData.value = res.data.list
  console.log("courseData",courseData.value);
}
const getExamData = async () => {
  const res = await userPagingExam(examQueryData.value)
  examData.value = res.data.list
  console.log("examData",examData.value);
}

//考试状态计算
const now = computed(() => new Date());

// 计算单个考试的状态
const getExamStatus = (item) => {
  const startTime = new Date(item.startTime);
  const endTime = new Date(item.endTime);
  const currentTime = now.value;
  
  // 考试已结束
  if (currentTime > endTime) {
    return 'ended';
  }
  
  // 考试未开始（检查是否在开始前10分钟内）
  const tenMinutesBeforeStart = new Date(startTime.getTime() - 10 * 60 * 1000);
  if (currentTime < tenMinutesBeforeStart) {
    return 'not-started';
  }
  
  // 可以进入考试
  return 'can-enter';
};

// 点击事件处理
const examDetail = (id) => {
  console.log('进入考试:', id);
  // 你的导航逻辑
};

const showDetail = (item) => {
  console.log('显示详情:', item);
  // 你的详情显示逻辑
};

//用户信息修改
const showUserDialog = ref(false);

onMounted(async () => {
  await getCourseList();
  await getExamData();
})
</script>

<style scoped lang="scss">
.top-info{
  margin-top: px2rem(40);
  padding: px2rem(40);
  border-radius: px2rem(10);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .left-container{
    display: flex;
    align-items: center;
    .avtor{
      width: px2rem(100);
      height: px2rem(100);
      border-radius: 50%;
      border: px2rem(4) solid #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      overflow: hidden;
      margin-right: px2rem(20);
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
      .no-avatar{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $mainColor;
        p{
          color: white;
          font-size: px2rem(40);
        }
      }
    }
    .right-user{
      .info-row{
        display: flex;
        align-items: center;
        .username{
          font-size: px2rem(24);
          color: $black_2;
        }
        .certification{
          margin-left: px2rem(20);
        }
      }
      .edit-info{
        margin-top: px2rem(20);
      }
    }
  }
  .right-data{
    display: flex;
    padding: px2rem(20);
    border-radius: px2rem(5);
    background: #f7f7f7;
    .data-item{
      text-align: center;
      padding: 0 px2rem(20);
      border-right: 1px solid #ddd;
      &:last-child{
        border-right: none;
      }
      .item-tit{
        font-size: px2rem(18);
        color: $black_2;
      }
      .item-num{
        margin-top: px2rem(10);
        font-size: px2rem(24);
        color: $black;
        line-height: px2rem(30);
      }
    }
  }
}
.module-container{
  margin-top: px2rem(40);
}
.course-list{
  margin-top: px2rem(20);
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  gap: px2rem(20);
  .course-item{
    width: calc(25% - 0.2rem);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
    .img-box{
      width: 100%;
      position: relative;
      padding-bottom: 56%;
      overflow: hidden;
      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
      }
    }
    .bottom-info{
      padding: px2rem(20);
      .title{
        font-size: px2rem(18);
        color: $black;
        @include textEllipsis(27, 1);
      }
      .description{
        margin-top: px2rem(10);
        font-size: px2rem(16);
        color: #666;
        height: px2rem(24);
        @include textEllipsis(24, 1);
      }
    }
    &:hover{
      box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
      .img-box img{
        transform: scale(1.1);
      }
      .bottom-info .title{
        color: $mainColor;
      }
    }
  }
}
.exam-list{
  margin-top: px2rem(20);
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  gap: px2rem(20);
  .exam-item{
    width: calc(25% - 0.2rem);
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
    .card-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        font-size: px2rem(20);
        color: $black;
      }
    }
    .time{
      font-size: px2rem(18);
      color: $black;
      display: flex;
      align-items: center;
      span{
        color: $black_2;
        width: px2rem(90);
        display: block;
      }
    }
    .card-footer{
      margin-top: px2rem(20);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &:hover{
      box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
      .img-box img{
        transform: scale(1.1);
      }
      .bottom-info .title{
        color: $mainColor;
      }
    }
  }
}
</style>